class CustomProgressBar {
    constructor(now, max, options, lineClassName = 'progress-bar-line') {
        this.dom = document.getElementsByClassName(lineClassName)[0];
        this.max = max;
        this.intervalCode = 0;
        this.now = now;
        this.syncState();
        if (options.parent) {
            document.querySelector(options.parent).appendChild(this.dom);
        } else document.body.appendChild(this.dom)
    }

    syncState() {
        this.dom.style.width = this.now + "%";
    }

    //arg1 -> step length
    //arg2 -> time(ms)
    startTo(step, time) {
        if (this.intervalCode !== 0) return;
        this.intervalCode = setInterval(() => {
            if (this.now + step > this.max) {
                this.now = this.max;
                this.syncState();
                clearInterval(this.intervalCode);
                this.intervalCode = 0;
                return;
            }
            this.now += step;
            this.syncState()
        }, time)
    }
}

function StartDirectDebitProgressBar(step, time = 220, containerClassName = 'progress-bar-container', parentSelector = '.progress') {
    let container = document.getElementsByClassName(containerClassName)[0];
    container.style.display = 'flex';
    container.classList.add('overlay');
    let pb = new CustomProgressBar(0, 93, {parent: parentSelector});
    pb.startTo(step, time);
}